export default function getImageMarkCanvas(offset) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const canvasWidth = document.documentElement.clientWidth - offset.width;
  const canvasHeight = document.documentElement.clientHeight - offset.height;
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  ctx.globalAlpha = 0.1;
  
  const docRatio = canvasWidth / canvasHeight

  ctx.translate(0, 0);

  return new Promise((resolve) => {

    const image = new Image()
    image.src = require('../assets/images/logo.png')
    image.onload = () => {
      let finalWidth = canvasWidth
      let finalHeight = canvasHeight
      const imageRatio = image.width / image.height
      if (imageRatio > docRatio) {
        finalWidth = canvasWidth
        finalHeight = canvasWidth / imageRatio
      } else {
        finalWidth = canvasHeight * imageRatio
        finalHeight = canvasHeight
      }
      ctx.drawImage(image, 0, 0, finalWidth, finalHeight)
      resolve({
        imgWidth: finalWidth,
        imgHeight: finalHeight,
        imgUrl: ctx.canvas.toDataURL()
      })
    }
  })
}
